<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .active {
      color: red;
    }
  </style>
  <body>
    <div id="root"></div>
    <script src="./lib/react.js"></script>
    <script src="./lib/react_dom.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super()
          this.state = {
            title: '哈哈',
            imgUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.31df3a5a2d8462228734f95d459883e2?rik=7EE6TeWDk%2f%2bctQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214331.jpg&ehk=SpI7mz%2byLqOkT8BL79jcd3iCtQYNFlBHQzbtF1p0vuQ%3d&risl=&pid=ImgRaw&r=0',
            href: 'http://www.baidu.com',

            isActive: true,
          }
        }

        render() {
          const { title, imgUrl, href, isActive } = this.state

          // 1.字符串拼接
          const className = `abc cab ${isActive ? 'active' : ''}`
          // 2.将所有的class加入到数组中
          const classList = ['abc', 'cba']
          if (isActive) {
            classList.push('active')
          }
          // 3.classnames
          return (
            <div>
              <h2 title={title}>{title}</h2>
              <img src={imgUrl} alt="" />
              <a href={href}>百度一下</a>
              {/* 绑定class属性：最好使用className */}
              <h2 className={className}>哈哈哈</h2>
              <h2 className={classList.join(' ')}>哈哈哈</h2>
              {/* 动态绑定style, 最外层{}表示插入变量，内层{}表示是一个对象类型 */}
              <h2 style={{ color: 'red', fontSize: '18px' }}>abv</h2>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.querySelector('#root'))
      root.render(<App />)
    </script>
  </body>
</html>
